<template>
	<view class="category-container" :style="{height: `${windowHeight}px`}">
		<!-- 门店 -->
		<view class="c-header">
			<u-search v-model="queryParams.name" placeholder="请输入门店名称" :showAction="true" actionText="搜索" :animation="true"
				@custom="handleSearch" @clear="handleSearch"></u-search>
			<u-icon @click="handleEdit" name="plus-circle" size='22'></u-icon>
		</view>
		<!-- 内容为空 -->
		<view class="empty-container" v-if="!list.length">
			<u-empty mode="data"></u-empty>
		</view>
		<!-- 列表 -->
		<view class="c-list" v-else>
			<u-list @scrolltolower="scrolltolower" :height="lineHeight">
				<u-list-item v-for="(item, index) in list" :key="index">
					<u-cell :title="item.name">
						<u-avatar slot="icon" shape="square" size="40" :src="item.logo"
							customStyle="margin: -3px 5px -3px 0"></u-avatar>
						<view class="collapse-footer-menu-icon" slot="value">
							<u-icon v-if="$auth.hasPermi('product:brand:update')" @click.native.stop="handleEdit(item.id)"
								name="edit-pen-fill" size="24" style="margin-right: 6px;" class="aedit-pen-fill"></u-icon>
							<u-icon v-if="$auth.hasPermi('product:brand:delete')" @click="handleDel(item.id)" name="trash-fill"
								size="22"></u-icon>
						</view>
					</u-cell>
				</u-list-item>
				<u-loadmore :status="loadMoreStatus" style="margin-top: 14px;" />
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getDeliveryPickUpStorePage,
		deleteDeliveryPickUpStore
	} from '@/api/store/center.js'

	export default {
		name: 'StoreCenter',
		data() {
			return {
				queryParams: {
					name: '',
					storeId: undefined,
					pageNo: 1,
					pageSize: 10
				},
				list: [],
				loadMoreStatus: 'loadmore',
			}
		},
		computed: {
			...mapGetters([
				'selectedStore',
			]),
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight;
			},
			lineHeight() {
				return uni.getSystemInfoSync().windowHeight - 60;
			}
		},
		onShow() {
			// 重置分页参数和列表数据
			this.queryParams.pageNo = 1;
			this.list = [];
			this.loadMoreStatus = 'loadmore';
			this.queryParams.storeId = this.selectedStore?.id;
			this.getList();
		},
		methods: {
			// 获取列表数据
			async getList(isSearch) {
				if (isSearch) {
					this.queryParams.pageNo = 1;
					this.list = [];
				}
				this.loadMoreStatus = 'loading';
				try {
					const {
						data
					} = await getDeliveryPickUpStorePage({
						...this.queryParams,
						pageNo: this.queryParams.pageNo
					});

					// 判断是否还有更多数据
					const hasMore = (this.queryParams.pageNo * this.queryParams.pageSize) < data.total;
					// 如果数据列表有内容，拼接到现有列表中
					if (data.list && data.list.length) {
						this.list = [...this.list, ...data.list];
						this.queryParams.pageNo += 1; // 页码加1
					}

					// 更新加载状态
					this.loadMoreStatus = hasMore ? 'loadmore' : 'nomore';
				} catch (error) {
					console.error('加载失败', error);
					this.loadMoreStatus = 'nomore'; // 失败时设置状态为 nomore
					this.$modal.msgError('加载失败，请重试');
				}
			},
			// 处理搜索
			  handleSearch() {
			    this.getList(true);
			  },
			// 处理编辑
			handleEdit(id) {
				this.$tab.navigateTo('/pages/mall/product/brand/brandForm?id=' + id)
			},
			// 滑动到底部
			scrolltolower() {
				if (this.loadMoreStatus === 'loadmore') {
					this.getList();
				}
			},
			handleDel(id) {
				this.$modal.confirm('确认删除该门店？').then(async () => {
					await deleteDeliveryPickUpStore(id);
					this.$modal.msgSuccess('删除成功');

					// 重新加载当前页
					this.queryParams.pageNo = 1;
					this.list = [];
					this.getList();
				})
			}
		}
	}
</script>

<style scoped>
	.category-container {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		width: 100%;
		padding: 12px;
		box-sizing: border-box;
	}

	.c-header {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.empty-container {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.c-list {
		flex: 1;
		overflow-y: auto;
		margin-top: 8px;
	}

	.loading-text {
		text-align: center;
		padding: 10px;
		color: #999;
	}

	.collapse-footer-icon,
	.collapse-footer-menu-icon {
		display: flex;
	}
</style>